<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>工作台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${yeqifu}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${yeqifu}/static/css/public.css" media="all" />
</head>
<body class="childrenBody">

<div style="display: flex;height: 40%; width: 100%">
    <div id="container1" style="height: 100%; width: 50%"></div>
    <div class="layui-row layui-col-space10" style="flex: 1">
        <div class="layui-col-lg6 layui-col-md6" style="width: 80%">
            <div
                style="font-size: 24px;
                    font-weight: bold;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-family: '楷体','楷体_GB2312';"
            >系统公告</div>
            <table class="layui-table mag0" lay-skin="line">
                <colgroup>
                    <col>
                    <col width="110">
                </colgroup>
                <tbody class="hot_news"></tbody>
            </table>
        </div>
    </div>

</div>

<div style="display: flex; width: 100%; height: 50%; margin-top: 20px">
    <div style="height: 100%;width: 50%">
        <form class="layui-form" method="post" id="searchFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">选择年份:</label>
                    <div class="layui-input-inline" style="padding: 5px">
                        <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy" style="height: 30px;border-radius: 10px">
                    </div>
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                            id="doSearch" style="margin-top: 4px">查询
                    </button>
                    <button type="reset"
                            class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                            style="margin-top: 4px">重置
                    </button>
                </div>
            </div>
        </form>
        <div id="container" style="height: 100%;width: 100%"></div>
    </div>



    <div style="height: 100%;width: 50%">
        <div id="container3" style="height: 100%;width: 100%; margin-top: 60px"></div>
    </div>
</div>
<!-- 查看公告的div -->
<div id="desk_viewNewsDiv" style="padding: 10px;display: none;">
    <h2 id="view_title" align="center"></h2>
    <hr>
    <div style="text-align: right;">
        发布人:<span id="view_opername"></span>
        <span style="display: inline-block;width: 20px" ></span>
        发布时间:<span id="view_createtime"></span>
    </div>
    <hr>
    <div id="view_content"></div>
</div>

<script type="text/javascript" src="${yeqifu}/static/layui/layui.js"></script>
<script type="text/javascript" src="${yeqifu}/static/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="${yeqifu}/static/echarts/js/jquery-3.1.1.min.js"></script>
<script>

    //获取系统时间
    var newDate = '';
    // getLangDate();
    //值小于10时，在前面补0
    function dateFilter(date){
        if(date < 10){return "0"+date;}
        return date;
    }
    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = "亲爱的${user.realname}，"+timeValue+"好！ 欢迎使用希望汽车租赁系统。当前时间为： "+newDate+"　"+week;
        setTimeout("getLangDate()",1000);
    }

    layui.use(['form','element','layer','jquery'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            element = layui.element;
        $ = layui.jquery;
        //上次登录时间【此处应该从接口获取，实际使用中请自行更换】
        $(".loginTime").html(newDate.split("日")[0]+"日</br>"+newDate.split("日")[1]);
        //icon动画
        $(".panel a").hover(function(){
            $(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
        },function(){
            $(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
        })
        $(".panel a").click(function(){
            parent.addTab($(this));
        })
        //最新文章列表
        $.get("${yeqifu}/news/loadAllNews?page=1&limit=10",function(data){
            var hotNewsHtml = '';
            const {data: dataList} = data;
            if (dataList.length > 5) {
                dataList.splice(5)
            }
            for(var i=0;i<dataList.length;i++){
                hotNewsHtml += '<tr ondblclick="viewNews('+dataList[i].id+')">'
                    +'<td align="left"><a href="javascript:;"> '+dataList[i].title+'</a></td>'
                    +'<td>'+dataList[i].createtime.substring(0,10)+'</td>'
                    +'</tr>';
            }
            $(".hot_news").html(hotNewsHtml);
            $(".userAll span").text(data.length);
        })

    })

    function viewNews(id){
        $.get("${yeqifu}/news/loadNewsById",{id:id},function(news){
            layer.open({
                type:1,
                title:'查看公告',
                content:$("#desk_viewNewsDiv"),
                area:['800px','550px'],
                success:function(index){
                    $("#view_title").html(news.title);
                    $("#view_opername").html(news.opername);
                    $("#view_createtime").html(news.createtime);
                    $("#view_content").html(news.content);
                }
            });
        });
    }

</script>

<script>
    layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#year',
            type: 'year',
            value:new Date()
        });

        $("#doSearch").click(function () {
            loadOpernameYearGrade();
            getDataYearGradeStat();
        });

        function loadOpernameYearGrade() {
            var year = $("#year").val();
            if (year===""){
                year=new Date().getFullYear();
            }
            $.get("${yeqifu}/stat/loadOpernameYearGradeStatJson",{year:year},function (data) {
                var dom = document.getElementById("container3");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '坐标轴刻度与标签对齐';

                option = {
                    title:{
                        text:'员工销售额(单位：元)',
                        textStyle: {
                            fontFamily: "'楷体','楷体_GB2312'",
                            fontSize: '24',
                            fontWeight: 'bold'
                        },
                        x:'center'
                    },
                    color: ['#5dd5c8'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top:'20%',
                        left: '3%',
                        right: '4%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : data.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'销售额',
                            type:'bar',
                            barWidth: '30%',
                            data:data.value
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
        }
        loadOpernameYearGrade();


        function getDataYearGradeStat() {
            var year = $("#year").val();

            if (year===""){
                year=new Date().getFullYear();
            }

            $.get("${yeqifu}/stat/loadCompanyYearGradeStatJson",{year:year},function (data) {
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title:{
                        text:'营收情况(单位: 元)',
                        textStyle: {
                            fontFamily: "'楷体','楷体_GB2312'",
                            fontSize: '24',
                            fontWeight: 'bold'
                        },
                        x:'center'
                    },
                    color: ['#5dd5c8'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top:'20%',
                        left: '3%',
                        right: '4%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data,
                        type: 'bar'
                    }]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
        }
        getDataYearGradeStat();
    });
</script>

<script>
    $.get("${yeqifu}/stat/loadCustomerAreaStatJson",function (data) {
        var dom = document.getElementById("container1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '客户地区分布情况',
                textStyle: {
                    fontFamily: "'楷体','楷体_GB2312'",
                    fontSize: '24',
                    fontWeight: 'bold'
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data
            },
            series: [
                {
                    name: '客户数量(占比)',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    })
</script>
</body>
</html>
